<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ include file="/WEB-INF/view/jsp/public/include.base.jsp" %>
<!DOCTYPE html>

<!--[if IE 8]><html class="ie8"> <![endif]-->
<!--[if IE 9]><html class="ie9 gt-ie8"> <![endif]-->
<!--[if gt IE 9]><html class="gt-ie8 gt-ie9 not-ie"> <![endif]-->
<!--[if !IE]> --><html lang="en"><!-- <![endif]-->
<head>
    <title>娃娃机运营系统</title>
    <jsp:include page="/WEB-INF/view/jsp/public/include.inc.top.jsp" flush="true"/>
    <style>
        #sign-in {
            position: fixed;
            right: 0;
            bottom: 0;
            z-index: 10000;
            background: rgba(0, 0, 0, .6);
            padding: 6px;
            border-radius: 3px;
        }

        #sign-in img {
            cursor: pointer;
            height: 40px;
        }

        #sign-in img:hover {
            opacity: .5;
        }

        #sign-in div {
            color: #fff;
            font-size: 10px;
            font-weight: 600;
            padding-bottom: 6px;
        }
    </style>
    <script type="text/javascript">
        if (window != top)
            top.location.href = location.href;
    </script>
</head>

<!-- 1. $BODY ======================================================================================

Body

Classes:
* 'theme-{THEME NAME}'
* 'right-to-left' - Sets text direction to right-to-left
-->
<body class="theme-default page-signin">
<script>
    var init = [];
    init.push(function () {
        var $div = $('<div id="sign-in" class="hidden-xs"><div>切换背景</div></div>'),
                bgs = ['${pageContext.request.contextPath}/resource/template/style1/signin-bg-1.jpg',
                    '${pageContext.request.contextPath}/resource/template/style1/signin-bg-2.jpg',
                    '${pageContext.request.contextPath}/resource/template/style1/signin-bg-3.jpg',
                    '${pageContext.request.contextPath}/resource/template/style1/signin-bg-4.jpg',
                    '${pageContext.request.contextPath}/resource/template/style1/signin-bg-5.jpg',
                    '${pageContext.request.contextPath}/resource/template/style1/signin-bg-6.jpg',
                    '${pageContext.request.contextPath}/resource/template/style1/signin-bg-7.jpg',
                    '${pageContext.request.contextPath}/resource/template/style1/signin-bg-8.jpg',
                    '${pageContext.request.contextPath}/resource/template/style1/signin-bg-9.jpg'];
        for (var i = 0, l = bgs.length; i < l; i++) $div.append($('<img src="' + bgs[i] + '">'));
        $div.find('img').click(function () {
            var img = new Image();
            img.onload = function () {
                $('#page-signin-bg > img').attr('src', img.src);
                $(window).resize();
            }
            img.src = $(this).attr('src');
            var storageSupported = (typeof(window.Storage) !== "undefined");
            if (storageSupported) {
                try {
                    window.localStorage.login_bg_img = $(this).attr('src');
                    return;
                } catch (e) {
                }
            }

        });
        $('body').append($div);
        document.cookie = 'login_bg_img=' + $(this).attr('src');
    });

    function getBrowserInfo() {
        var agent = navigator.userAgent.toLowerCase();

        var regStr_ie = /msie [\d.]+;/gi;
        var regStr_ff = /firefox\/[\d.]+/gi
        var regStr_chrome = /chrome\/[\d.]+/gi;
        var regStr_saf = /safari\/[\d.]+/gi;
        //IE
        if (agent.indexOf("msie") > 0) {
            return agent.match(regStr_ie);
        }

        //firefox
        if (agent.indexOf("firefox") > 0) {
            return agent.match(regStr_ff);
        }

        //Chrome
        if (agent.indexOf("chrome") > 0) {
            return agent.match(regStr_chrome);
        }

        //Safari
        if (agent.indexOf("safari") > 0 && agent.indexOf("chrome") < 0) {
            return agent.match(regStr_saf);
        }

    }
    var browser = getBrowserInfo();
    //alert(browser);
</script>


<!-- Page background -->
<div id="page-signin-bg">
    <!-- Background overlay -->
    <div class="overlay"></div>
    <!-- Replace this with your bg image -->
    <script>
        var src;
        var storageSupported = (typeof(window.Storage) !== "undefined");
        if (storageSupported) {
            try {
                src = window.localStorage.login_bg_img;
            } catch (e) {
            }

        } else {
            var key, val, pos, cookies = document.cookie.split(';');
            for (var i = 0, l = cookies.length; i < l; i++) {
                pos = cookies[i].indexOf('=');
                key = cookies[i].substr(0, pos).replace(/^\s+|\s+$/g, '');
                val = cookies[i].substr(pos + 1).replace(/^\s+|\s+$/g, '');
                if (key === 'login_bg_img') {
                    src = val;
                }
            }
        }
        if (src == null || src == undefined || src.length == 0)
            src = "${pageContext.request.contextPath}/resource/template/style1/signin-bg-1.jpg";
        document.write('<img src="' + src + '" alt="">');
    </script>

</div>
<!-- / Page background -->

<!-- Container -->
<div class="signin-container">

    <!-- Left side -->
    <div class="signin-info">
        <a href="#" class="logo">
            <%--<img src="${pageContext.request.contextPath}/resource/auth/bg/logo-big.png" alt="" style="margin-top: -5px;">&nbsp;--%>
            <span style="font-size: 18px;">娃娃机运营系统</span>
        </a> <!-- / .logo -->
        <%-- <div class="slogan">
             KTV
         </div>--%>
        <!-- / .slogan -->
        <ul>
            <li><i class="fa fa-outdent signin-icon"></i>娃娃机管理</li>
            <li><i class="fa fa-money signin-icon"></i>财务报告管理</li>
            <li><i class="fa fa-heart signin-icon"></i> 用户信息管理</li>
        </ul>
        <!-- / Info list -->
    </div>
    <!-- / Left side -->

    <!-- Right side -->
    <div class="signin-form">

        <!-- Form -->
        <form action="${pageContext.request.contextPath}/auth/login" id="loginForm" name=loginform method="post">
            <div class="signin-text">
                <span>请输入您的账号和密码</span>
            </div>
            <!-- / .signin-text -->

            <div class="form-group w-icon">
                <input name="account" id="username_id" class="form-control input-lg" placeholder="用户名"
                       type="text" value="">
                <span class="fa fa-user signin-form-icon"></span>
            </div>
            <!-- / Username -->

            <div class="form-group w-icon">
                <input name="password" id="password_id" class="form-control input-lg" placeholder="密码"
                       type="password" value="">
                <span class="fa fa-lock signin-form-icon"></span>
            </div>
            <!-- / Password -->
            <div class="form-group">
                <div id="errorMsg" style="display: none;"><span style="color: red;"></span></div>
            </div>
            <div class="form-actions">
                <center>
                <input value=" 登 录 " class="signin-btn btn-primary bg-primary" type="submit">
                <input value=" 重 置 " class="signin-btn btn-default bg-default" type="reset">
                </center>
                <%--<a href="#" class="forgot-password" id="forgot-password-link">忘记密码?</a>--%>
            </div>
            <!-- / .form-actions -->
        </form>
        <!-- / Form -->

        <!-- "Sign In with" block -->
        <!-- <div class="signin-with">
            Facebook
            <a href="http://infinite-woodland-5276.herokuapp.com/index.html" class="signin-with-btn" style="background:#4f6faa;background:rgba(79, 111, 170, .8);">Sign In with <span>Facebook</span></a>
        </div> -->
        <!-- / "Sign In with" block -->

        <!-- Password reset form -->
        <div class="password-reset-form" id="password-reset-form">
            <div class="header">
                <div class="signin-text">
                    <%--<span>密码重置</span>--%>

                    <div class="close">×</div>
                </div>
                <!-- / .signin-text -->
            </div>
            <!-- / .header -->

            <!-- Form -->
            <form action="index.html" id="password-reset-form_id">
                <div class="form-group w-icon">
                    <input name="password_reset_email" id="p_email_id" class="form-control input-lg"
                           placeholder="Enter your email" type="text">
                    <span class="fa fa-envelope signin-form-icon"></span>
                </div>
                <!-- / Email -->

                <div class="form-actions">
                    <%--<input value="发送密码重置邮件" class="signin-btn bg-primary" type="submit">--%>
                </div>
                <!-- / .form-actions -->
            </form>
            <!-- / Form -->
        </div>
        <!-- / Password reset form -->
    </div>
    <!-- Right side -->
</div>
<!-- / Container -->
<%--<div id="errorMsg" class="alert alert-danger alert-dismissible" role="alert">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <span></span>
</div>--%>

<!-- <div class="not-a-member">
    Not a member? <a href="http://infinite-woodland-5276.herokuapp.com/pages-signup.html">Sign up now</a>
</div> -->

<jsp:include page="/WEB-INF/view/jsp/public/include.inc.bottom.jsp" flush="true"/>
<!-- Style1 settings script -->
<%--<script src="${pageContext.request.contextPath}/resource/template/style1/settings.js"></script>--%>
<!-- / Style1 script -->
<script type="text/javascript">
    // Resize BG/**/
    init.push(function () {
        var $ph = $('#page-signin-bg'),
                $img = $ph.find('> img');

        $(window).on('resize', function () {
            $img.attr('style', '');
            if ($img.height() < $ph.height()) {
                $img.css({
                    height: '100%',
                    width: 'auto'
                });
            }
        });
    });

    // Show/Hide password reset form on click
    init.push(function () {
        $('#forgot-password-link').click(function () {
            $('#password-reset-form').fadeIn(400);
            return false;
        });
        $('#password-reset-form .close').click(function () {
            $('#password-reset-form').fadeOut(400);
            return false;
        });
    });

    // Setup Sign In form validation
    init.push(function () {
        $("#loginForm").validate({
            focusInvalid: true, errorPlacement: function () {
            }
        });

        // Validate username
        $("#username_id").rules("add", {
            required: true
        });

        // Validate password
        $("#password_id").rules("add", {
            required: true
        });
    });

    // Setup Password Reset form validation
    init.push(function () {
        $("#password-reset-form_id").validate({
            focusInvalid: true, errorPlacement: function () {
            }
        });

        // Validate email
        $("#p_email_id").rules("add", {
            required: true,
            email: true
        });
    });
    window.PixelAdmin.start(init);
</script>


</body>
<script>
</script>
<c:if test="${not empty message}">
    <script type="text/javascript">
        $(function () {
            $('#errorMsg span').text('${message}');
            $('#errorMsg').show();
        });
    </script>
</c:if>
</html>